<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缓存机制</title>
    <style>
    </style>
</head>
<body>
    
</body>
</html>
<script>
// 简述储存？    
// 缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

// js 的三种数据存储方式 
// cookie，sessionStorage，localStorage区别     
//    1.存储大小
        //cookie数据大小不能超过4k。
        //sessionStorage和localStorage存储大小的限制，比cookie大 ，可达到5M或更大。即弥补cookie的大小不足
//    2.有效时间
        //localStorage：    存储持久数据       浏览器窗口关闭后    数据不丢失     除非主动删除数据。
        //sessionStorage：  数据在当前         浏览器窗口关闭后    自动删除。
        //cookie：          设置cookie过期时间之前一直有效，即使窗口或浏览器关闭  默认情况下当浏览器关闭后，cookie数据将被销毁
        
//    3.数据与服务器之间的交互方式
        //cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
        //sessionStorage&localStorage不会自动把数据发给服务器，仅在本地保存。

// 浏览器缓存有那些 通常缓存有哪几种
//cookie
	//1cookie的特点和作用？
           //客户端(会话技术)，将数据保存到客户端
           //cookie 存储数据在客户端浏览器
           //浏览器对单个cookie的大小限制为(4kb)及对同一个域名下的总cookie数量限制为(20个)
           //cookie一般用于存出少量的不太敏感的数据 
           //在不登录的情况下，完成服务器对客户端的身份识别 、        
//Session
           //服务器端(会话技术),
           //在一次会话的多次请求间共享数据，将数据保存在服务器端的对象中
           //1session的特点
           //session用于存储一次会话的多次请求的数据，存在服务器端
	         //session可以存储任意类型，任意大小的数据
    

    
    /**************************************************************************************************  
    》sessionStorage仅在当前会话下有效 关闭页面或浏览器后 就被清除  
        setItem(key,value) 设置数据 
        getItem(key)       获取数据 
        removeItem(key)    移除数据 
        clear()            清除数据 
    */
    window.sessionStorage.setItem("name","常东东");       //添加数据   window可以不写     
    window.sessionStorage.setItem("age","18");            
    console.log(window.sessionStorage.getItem("name"))    //获取数据    //常东东
    //window.sessionStorage.removeItem("gemder");         //清除某个数据 
    //window.sessionStorage.clear();                      //清除所有数据 


    /**************************************************************************************************
    》localStorage h5标准新添加的技术 用于长久保存整个网址的数据 保存的数据没有过期时间 知道手动删除 
      + localStorage 和 sessionStorage最大一般为5mb 仅在客户端(即浏览器)中保存 不参与和服务器的通信
        localStorage(key,value)    设置数据 
        getItem(key,value)         获取数据  
        removeItem(key)            移除数据 
        clear()                    清除所有值
      //拓展！
        localStorage 也可以手动设置生效时间 即(大概)思路 是存储的值加一个时间戳  下次取值时 验证时间戳 
        注意 localStorage只能存储字符 存入时将对象转为字符串JSON.stringify(setDate)  读取时也要解析 JSON.parse(getData)   
        1.解析化将字符串转换为原生对象 JSON.parse(text)
        2.字符串化将本机对象转换为字符串，以便可以通过网络传输 JSON.stringify(Object)
    */
    var arr = [1,2,3,3,4,5,232,3,45,2]  
    window.localStorage.setItem("data",arr);              //添加数据                     
    window.localStorage.setItem("cm","180cm");            //
    console.log(window.localStorage.getItem("data"));     //获取数据  //1,2,3,3,4,5,232,3,45,2
                                                          //清除某个数据  
                                                          //清空所有数据 


     
    /************************************************************************************************
     * https://haiyong.blog.csdn.net/article/details/117837835
     Cookie
     是一些数据 存储于你电脑上的文本文件中 用于存储web页面的用户信息 
     Cookie 数据是以键值对的形式存在的 每一个键值对都有过期时间 
     如果 不设置时间 浏览器关闭 cookie就会消失 当然优化也可以手动消除cookie    
     Cookie每次都会携带在http请求头中 如果使用cookie保存过多数据会带来性能问题  
     Cookie 内存受限 每个域名下是4k~ 每个域名大概能存储50哥键值对 
    /
    //基本操作  
    /* 通过访问document.cookie可以对cookie进行创建 修改获取 
       默认情况下 cookie在浏览器关闭时删除 你还可以为cookie某个键值 添加一个过期时间 
       如果设置新的cookie时 某个key已经存在了 则会更新这个key对应的值 否则他们hi同时存在cookie中   
         */
    document.cookie = "username = eddieChang";          //设置cookie  
    document.cookie = "age = 20"    
    var msg = document.cookie;                          //读取cookie 
    console.log(msg)
    var d = new Date();                                 //添加过期时间 单位天  
    var days = 3;                                       //3天  
    d.setDate(d.getDate()+days);     
    // console.log('tag', d)   时间戳  
    document.cookie = "username = eddieChang" + "expires="+d;
    //删除cookie 给某个键值对 设置过期时间  
    d.setDate(d.getDate() - 1);
    console.log(document.cookie)

     
     
     
  //3中存储的共同点 d都保存在浏览器端 可以指aplition 中查看 
  //         不同点 
  
  /*
  》传递方式不同 
    // cookie数据始终在同源 的http请求中携带(即使不需要) 即cookie在浏览器 和服务器 来回传递 
  》数据大小不同
    // cookie受限 .....
    // sessionStorage 和 localStoreage 虽然 也有存储大小的限制 但比cookie大的多 5m+~
  》数据有效期不同 
    //sessionStorage 仅在当前浏览器窗口关闭前有效 不可能持久保持  
    //localStore     始值有效 窗口或浏览器关闭也一直在 因此作用持久数据     
    //cookie         只在设置cookie过期的时间之前一直有效 即使窗口或浏览器关闭     
  》作用域不同 
    //sessionStorage 不在不同的浏览器窗口中共享 即使同一个页面 
    //loca.... && cookie 在同源窗口中 都是共享的  
  */
                                                         



</script>